.hover-red {
  /*background: url('~@/assets/img/ment-red.png') no-repeat left center;*/
 background-size: 200px 45px;
 background: rgb(180, 216, 254);
}

.hover-blue {
 background: rgb(180, 216, 254);
 /*background: url('~@/assets/img/ment-blue.png') no-repeat left center;*/
 background-size: 200px 45px;
}
.wrap {
  width: 200px;
  transition: all .3s;
  &.coll{
    width: 47px;
    .pt-menu .menu-li{
      width: 47px;
      display: flex;
      align-items: center;
      padding: 0;
      .left{
        margin: 0 auto;
      }
      .pt-submenu{
        left: 40px;
      }
    }
  }
 .pt-menu {
   width: 100%;
   .menu-li {
     position: relative;
     padding: 0 15px;
     height: 45px;
     cursor: pointer;
     transition: all .3s;
     span {
       color:#8d9199;
     }
     .left {
      transition: all .3s;
       width: 20px;
       margin-right: 14px;
       line-height: 45px;
       text-align: center;
     }
     .right {
       position: absolute;
       right: 20px;
       color: #999;
       width: 1em;
       height: 1em;
     }
     .pt-submenu {
       display: none;
       position: fixed;
       left: 190px;
       z-index: 9999999;
       background: #f5f6fb;
       li {
         width: 170px;
         padding: 0 15px;
         height: 45px;
         color:#8d9199;
       }
     }
     &:hover > .pt-submenu {
       display: block;
     }
     &:hover, &.is-active {
       @extend .hover-red;
     }
     &.is-active span{
       color:#2f3033;
     }
     .pt-submenu li {
       &:hover, &.is-active {
         @extend .hover-red;
       }
       &.is-active {
         color:#2f3033;
       }
     }
   }
 }
}
